<template>
    <div>
        <div class="chart">
            <p class="time">更新时间：{{ upTime }}</p>
            <div ref="chart" class="chart2"></div>
        </div>
        <a-select class="select" mode="multiple" :default-value="[0, 1]" placeholder="请选择" @change="changeSelect">
            <a-select-option v-for="(i, index) in select" :key="index">{{ i.name }}</a-select-option>
        </a-select>
    </div>
</template>

<script>
    import axios from 'axios';
    import { key, api_weather } from '../common/constrant.js'
    import * as echarts from 'echarts'

    export default{
        data(){
            return{
                loc:"",
                data:[],
                upTime:"",
                select:[
                    {id:0, name:'最高温度', type:'tempMax'},
                    {id:1, name:'最低温度', type:'tempMin'},
                    {id:2, name:'白天风向360角度', type:'wind360Day'},
                    {id:3, name:'白天风速(公里/小时)', type:'windSpeedDay'},
                    {id:4, name:'夜间风向360角度', type:'wind360Night'},
                    {id:5, name:'夜间风速(公里/小时)', type:'windSpeedNight'},
                    {id:6, name:'相对湿度(百分比)', type:'humidity'},
                    {id:7, name:'总降水量(毫米)', precip:'tempMax'},
                    {id:8, name:'大气压强(百帕)', type:'pressure'},
                ],
                chartListName:[],
                chartDate:[ [], [], [], [], [], [], [], [], [] ],
            }
        },

        mounted(){
            this.getData()
        },

        computed:{
            location:function(){
                return this.$store.state.location
            }
        },

        methods:{
            // 获取数据
            getData(){
                // console.log(this.location)
                this.loc = Number(this.location.lon).toFixed(2) + "," + Number(this.location.lat).toFixed(2)
                // console.log(this.loc)
                axios.get(api_weather,{
                    params:{
                        key: key,
                        location: this.loc
                    }
                }).then((res) => {
                    // console.log(res.data.daily)
                    this.data = res.data.daily
                    // console.log(this.data)
                    this.upTime = res.data.updateTime
                    // this.loadEchart()
                    this.changeSelect([0,1])
                })
                // console.log(this.data)
            },

            //从data获取指定数值组成列表
            getOneOfLis(ids){
                return this.data.map(item => item[ids])
            },

            //图表内容筛选
            changeSelect(value){
                this.chartListName = []
                this.chartDate = [ [], [], [], [], [], [], [], [], [] ]
                for(let i = 0; i < value.length; i++){
                    this.chartListName.push(this.select[value[i]].name)
                    this.chartDate[this.select[value[i]].id].push(this.getOneOfLis(this.select[value[i]].type))
                }
                // console.log(value)
                // console.log(this.chartListName)
                // console.log(this.chartDate)
                this.loadEchart()
            },

            // 加载图表
            loadEchart(){
                console.log(this.chartDate)
                var myChart = echarts.init(this.$refs.chart);
                var option;

                option = {
                    title: {
                        text: 'Stacked Line'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: this.chartListName
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.getOneOfLis('fxDate')
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        name: '最高温度',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[0][0]
                        },
                        {
                        name: '最低温度',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[1][0]
                        },
                        {
                        name: '白天风向360角度',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[2][0]
                        },
                        {
                        name: '白天风速',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[3][0]
                        },
                        {
                        name: '夜间风向360角度',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[4][0]
                        },
                        {
                        name: '夜间风速',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[5][0]
                        },
                        {
                        name: '相对湿度',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[6][0]
                        },
                        {
                        name: '总降水量',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[7][0]
                        },
                        {
                        name: '大气压强',
                        type: 'line',
                        stack: 'Total',
                        data: this.chartDate[8][0]
                        },
                    ]
                };

                option && myChart.setOption(option);
            }
        },

        watch:{
            location:function(){
                this.getData()
            }
        }
    }
</script>

<style>
    .chart{
        height: 34rem;
        width: 80rem;
        display: inline-block;
        /* background-color: black; */
    }
    .chart2{
        height: 30rem;
        width: 80rem;
        /* background-color: aqua; */
    }
    .select{
        height: 10rem;
        width: 40rem;
        color: aqua;
    }
    .time{
        font-size: 20px;
        text-align: left;
    }
</style>